<script setup>
import { getCategoryFilterAPI, getSubCategoryAPI } from '@/apis/category';
import { onMounted, onUpdated, ref, watch } from 'vue';
import { useRoute } from 'vue-router';
import GoodsItem from '@/views/Home/components/GoodsItem.vue';

// 获取二级分类导航数据
const categoryData = ref({})
const getCategoryData = async (id) => {
  const res = await getCategoryFilterAPI(id)
  categoryData.value = res.result
}
// 获取基础列表数据
const goodList = ref([])

const getGoodList = async (data) => {
  const res = await getSubCategoryAPI(data)
  goodList.value = res.result.items
  // 更新分页数据
  total.value = res.result.counts
  pages.value = res.result.pages
}

// 分页数据
// const pageData = ref({
//   currentPage: 1,
//   pageSize: 10,
//   total: 110,
//   pages: 11,
// })
// 默认分页数据
const currentPage = ref(1) // 当前页码
const pageSize = ref(10) // 每页显示的条数
const total = ref(110) // 总条数
const pages = ref(11) // 总页数


// 路由参数
const route = useRoute()
// 数据请求
const reqData = ref({
  categoryId: route.params.id,
  page: currentPage.value,
  pageSize: pageSize.value,
  sortField: 'publishTime',
})

onMounted(() => {
  getCategoryData(route.params.id)
  getGoodList(reqData.value)
})

// tab 切换回调
const tabChange = (val) => {
  reqData.value.sortField = val // 可屏蔽，因为点击tab会自动触发tab-change事件，会自动更新reqData.value.sortField的值
  reqData.value.page = 1
  getGoodList(reqData.value)
}

// 加载更多
const disabled = ref(false)
// 滚动加载更多数据
const load = async () => {
  reqData.value.page++
  const res = await getSubCategoryAPI(reqData.value)
  goodList.value = [...goodList.value, ...res.result.items]
  // 判断是否还有更多数据
  if (res.result.items.length === 0) {
    // 没有更多数据，取消监听
    // window.removeEventListener('scroll', load) // 取消监听
    disabled.value = true // 取消监听
  }
  // 如果分页小于总页数，继续加载
  if(currentPage.value < pages.value){
    currentPage.value++
  }
}

  //重点代码，手动watch，不再使用分页组件自带的 current-page 和 page-size 方法
  watch([currentPage,pageSize],async () => {
    reqData.value.page = currentPage.value
    reqData.value.pageSize = pageSize.value
    const res = await getSubCategoryAPI(reqData.value)
    // getGoodList(reqData.value)
    goodList.value = [...res.result.items, ...goodList.value]
  })
</script>

<template>
    <div class="container ">
        <!-- 面包屑 -->
        <div class="bread-container">
            <el-breadcrumb separator=">">
                <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
                <el-breadcrumb-item :to="{ path: `/category/${categoryData.parentId}` }">{{ categoryData.parentName }}
                </el-breadcrumb-item>
                <el-breadcrumb-item>{{ categoryData.name }}</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="sub-container">
            <el-tabs v-model="reqData.sortField" @tab-change="tabChange">
                <el-tab-pane label="最新商品" name="publishTime"></el-tab-pane>
                <el-tab-pane label="最高人气" name="orderNum"></el-tab-pane>
                <el-tab-pane label="评论最多" name="evaluateNum"></el-tab-pane>
            </el-tabs>
            <!-- 商品分页 -->
            <div>
              <el-pagination
                v-model:current-page="currentPage"
                v-model:page-size="pageSize"
                :page-sizes="[10, 20, 30, 40]"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total"
              />
            </div>
            <div class="body" v-infinite-scroll="load" :infinite-scroll-disabled="disabled">
              <!-- 商品列表-->
              <GoodsItem v-for="good in goodList" :key="good.id" :good="good" />
            </div>
        </div>
    </div>
</template>



<style lang="scss" scoped>
.bread-container {
    padding: 25px 0;
    color: #666;
}

.sub-container {
    padding: 20px 10px;
    background-color: #fff;

    .body {
        display: flex;
        flex-wrap: wrap;
        padding: 0 10px;
    }

    .goods-item {
        display: block;
        width: 220px;
        margin-right: 20px;
        padding: 20px 30px;
        text-align: center;

        img {
            width: 160px;
            height: 160px;
        }

        p {
            padding-top: 10px;
        }

        .name {
            font-size: 16px;
        }

        .desc {
            color: #999;
            height: 29px;
        }

        .price {
            color: $priceColor;
            font-size: 20px;
        }
    }

    .pagination-container {
        margin-top: 20px;
        display: flex;
        justify-content: center;
    }


}
</style>
